<template>
    <!-- 计数器功能区 -->
    <div class="calc">
        <div class="input-num">
            <button @click="sub">-</button>
            <span>{{num}}</span>
            <button @click="add">+</button>
        </div>

        <br><br>
        <h1>{{num}}</h1>
    </div>
</template>
  
<script setup>
  import {ref , reactive, watch } from 'vue'

  let num = ref(0)
watch(num, (newValue , oldValue)=>{
  if (newValue >= 10) {
    alert("数字累加过大");
    num.value = 10;
  }
  if (newValue <= 0) {
    alert("数字累加过小");
    num.value = 0;
  }
})
const sub = () => {
  num.value--;
}
const add = () => {
  num.value++;
}
</script>
  
<style lang="less" scoped>
    body{
        background-color: #f5f5f5;
    }
    .calc {
        width: 480px;
        height: 80px;
        margin: auto;
    }
    .input-num {
        margin-top:20px;
        height: 100%;
        display: flex;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 4px 4px 4px #adadad;
        border: 1px solid #c7c7c7;
        background-color: #c7c7c7;
    }
    .input-num button {
        width: 150px;
        height: 100%;
        line-height: 30px;
        font-size: 40px;
        color: #ad2a27;
        cursor: pointer;
        border: none;
        outline: none;
        background-color:rgba(0, 0, 0, 0);
    }
    .input-num span {
        height: 100%;
        font-size: 40px;
        flex: 1;
        text-align: center;
        line-height: 80px;
        font-family:auto;
        background-color: white;
    }
</style>
  